<template>
	<view class="page">
		<u-row customStyle="margin-bottom: 20px">
			<u-col span="3">
				<u-avatar size="70" mode="aspectFill" :src="userInfo.headimgurl"></u-avatar>
			</u-col>
			<u-col span="9">
				<view style="display: flex;margin-bottom: 10rpx;">
					<view style="width: 250rpx;">
						<text :bold="true">{{userInfo.nickname}}</text>
					</view>

					<view class="function_btn">
						<u-button @click="add_interest" v-if="interest" :customStyle="{color: '#000'}" size="mini"
							color="#c8c9cc" shape="circle" text="取消关注"></u-button>
						<u-button @click="add_interest" v-if="!interest" :customStyle="{color: '#000'}" size="mini"
							color="#ffd91d" shape="circle" text="关注"></u-button>

						<u-button @click="add_shield" v-if="shield" :customStyle="{color: '#000',marginLeft: '20rpx'}"
							size="mini" color="#c8c9cc" shape="circle" text="取消屏蔽"></u-button>
						<u-button @click="add_shield" v-if="!shield" :customStyle="{color: '#000',marginLeft: '20rpx'}"
							size="mini" color="#ffd91d" shape="circle" text="屏蔽"></u-button>
					</view>
				</view>


				<view class="info_bar">
					<view class="age">
						<u--text :prefixIcon="userInfo.sex == '男' ? 'man' : 'woman'"
							:iconStyle="userInfo.sex == '男' ? man : woman" text="21岁"></u--text>
					</view>
					<view class="fans">
						<view>{{userInfo.being_interest_number}}</view>
						<view>粉丝</view>
					</view>
					<view class="interest">
						<view>{{userInfo.interest_number}}</view>
						<view>关注</view>
					</view>
				</view>

			</u-col>
		</u-row>
	

		<view style="padding: 20rpx;">
			<text>吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。</text>
		</view>

		<view style="background-color: #fff;">
			<u-tabs :list="list1" @click="clickTab"></u-tabs>
		</view>

		<view class="recommend">
			<view  v-show="tabIndex == 0">
			  <Impression :leader-nid="member_nid" :evaluate="evaluate" :tagList="tagList"></Impression>
			</view>	
			<view  v-show="tabIndex == 1">
			  <Activity :member_nid="member_nid"></Activity>
			</view>	
			
			<view  v-show="tabIndex == 3">
			  <Activity :type="1" :member_nid="member_nid"></Activity>
			</view>	
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user.js'
	import * as ShieldApi from '@/api/shield.js'
	import * as InterestApi from '@/api/interest.js'
	import * as CommentApi from '@/api/comment.js'	
	import Activity from '@/components/user/activity.vue';	
	import Impression from '@/components/user/impression.vue';		
	export default {
		components: {
			Activity,
			Impression
		},
		data() {
			return {
				evaluate:{good:0,bad:0},
				member_nid: 0,
				event_nid: 0,
				man: 'font-size: 40rpx;color:#2b85e4',
				woman: 'font-size: 40rpx;color:#fab6b6',
				shield: true,
				interest: true,
				tabIndex: 0,
				tagList: [],
				userInfo: {},
				list1: [{
					name: '趣友印象',
				}, {
					name: '相关活动',
				}, {
					name: '动态',
					badge: {
						value: 5,
					}
				}]
			}
		},
		onLoad(e) {
			this.member_nid = e.member_nid
			this.getUserInfo(this.member_nid)
			this.get_shield(this.member_nid)
			this.get_interest(this.member_nid)
			this.countComment()
		},
		methods: {
			countComment(){
				CommentApi.count({
					leader_nid: this.member_nid
				}).then(res => {
					this.evaluate = res.data
				})
			},
			clickTab(item) {
				console.log('item', item);
				this.tabIndex = item.index
			},
			add_interest() {
				InterestApi.interest({
					member_nid: this.member_nid
				}).then(res => {
					if (res.status == 200) {
						this.interest = res.data
					}
				})
			},
			add_shield() {
				ShieldApi.shield({
					member_nid: this.member_nid
				}).then(res => {
					if (res.status == 200) {
						this.shield = res.data
					}

				})
			},
			// 获取当前用户信息
			getUserInfo(member_nid) {
				UserApi.user_info_by_id({
					member_nid: member_nid
				}).then(res => {
					this.tagList = res.data.tag.split(',')
					this.userInfo = res.data

					if (this.userInfo.leader == '是') {

						this.list1.push({
							name: '主持活动'
						})
					}
				})
			},
			get_shield(member_nid) {
				ShieldApi.get_shield({
					member_nid: member_nid
				}).then(res => {
					this.shield = res.data
				})
			},
			get_interest(member_nid) {
				InterestApi.get_interest({
					member_nid: member_nid
				}).then(res => {
					this.interest = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 40rpx;

		.youqu-color {
			background: #ffd91d;
		}


		.function_btn {
			display: flex;
			justify-content: flex-end;
			color: #000;
			width: 300rpx;
		}

		.info_bar {
			display: flex;

			.age {
				background-color: #ececec;
				box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2), 0 5rpx 10rpx 0 rgba(0, 0, 0, 0.19);
				padding: 5rpx;
				width: 120rpx;
				height: 40rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
				text-align: center;
			}

			.fans {
				width: 100rpx;
				margin-left: 15rpx;
				text-align: center;
			}

			.interest {
				width: 100rpx;
				margin-left: 15rpx;
				text-align: center;
			}
		}

		.recommend {
			margin-top: 50rpx;
			background-color: #fff;


			.list {
				padding-top: 20rpx;
				padding-bottom: 60rpx;

				.item {
					border-radius: 15rpx;
					background-color: #FFFFFF;
					margin-bottom: 40rpx;
					box-shadow: 0 0 15rpx #C0C0C0;
					display: flex;

					.left {
						width: 220rpx;

						image {
							width: 200rpx;
							height: 200rpx;
							margin: 10rpx;
						}
					}

					.right {
						width: 500rpx;
					}

					image {
						width: 100%;
						height: 320rpx;
						border-radius: 15rpx 15rpx 0 0;
					}

					.avatar-list {
						padding: 20rpx;
					}

					.title {
						font-size: 36rpx;
						font-weight: bold;
						margin: 20rpx 10rpx;
					}

					.name {
						float: left;
						font-size: 30rpx;
						font-size: bold;
						margin-right: 20rpx;
						width: 80rpx;
						text-align: right;
					}

					.content {
						float: left;
						font-size: 32rpx;
						line-height: 80rpx;
						color: #A0A0A0;
					}
				}

			}
		}
	}
</style>